<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
  <div class="row main">
    <div class="col-lg-5 col-md-5 my-left">
      <div class="my-input">
        <div class="input-group">
          <input id="my-syntax" type="text" class="form-control my-get-syn my-step1-disable" autocomplete="off"
                 placeholder="请输入重写规则">
          <div class="input-group-btn">
            <button type="button" class="btn btn-info" id="my-ope-add">添加</button>
            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="javascript:void(0)" class="my-ope-add my-step1-disable">添加</a></li>
              <li><a href="javascript:void(0)" class="my-ope-reset-syn">重置</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="javascript:void(0)" class="my-ope-start my-step1-disable">开始分析</a></li>
            </ul>
          </div>
        </div>
      </div><!-- my-input -->
      <div class="my-first-last panel panel-default table-responsive">
        <div class="panel-heading">文法</div>
        <table class="table">
          <thead>
          <colroup>
            <col width="33.33333%">
            <col width="33.33333%">
            <col width="33.33333%">
          </colroup>
          <tr>
            <th>重写规则</th>
            <th>FirstV<sub>T</sub></th>
            <th>LastV<sub>T</sub></th>
          </tr>
          </thead>
          <tbody id="my-grammar"></tbody>
        </table>
      </div><!-- my-first-last -->
      <div class="panel panel-default my-relation">
        <div class="panel-heading">大小关系</div>
        <div class="my-gt panel panel-default">
          <div class="panel-heading">大于</div>
          <div class="panel-group" id="my-gt-rel" role="tablist" aria-multiselectable="true">

          </div><!-- my-gt-rel -->
        </div><!-- my-gt -->
        <div class="my-lt panel panel-default">
          <div class="panel-heading">小于</div>
          <div class="panel-group" id="my-lt-rel" role="tablist" aria-multiselectable="true">

          </div><!-- my-lt-rel -->
        </div><!-- my-lt -->
        <div class="my-eq panel panel-default">
          <div class="panel-heading">等于</div>
          <div id="my-eq-rel">

          </div><!-- my-eq-rel -->
        </div><!-- my-eq -->
      </div>
    </div>
    <div class="col-lg-7 col-md-7">
      <div class="my-matrix panel panel-default">
        <div class="panel-heading">算符优先矩阵</div>
        <table class="table table-bordered" id="my-ope-matrix">
        </table>
      </div>
      <div class="my-sentence">
        <div class="input-group">
          <label for="sen" class="input-group-addon my-label">请输入句子</label>
          <input id="sen" type="text" class="form-control" disabled>
          <div class="input-group-btn">
            <button class="btn btn-primary my-ope-identify" disabled=>识别</button>
            <button type="button" class="btn btn-primary dropdown-toggle my-ope-identify-addon" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" disabled>
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="javascript:void(0)" class="my-ope-identify">识别</a></li>
              <li><a href="javascript:void(0)" class="my-ope-reset-syn">重置</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="javascript:void(0)" data-toggle="modal" data-target="#myModal">在对话框中显示</a></li>
            </ul>
          </div>
        </div>
      </div><!-- my-sentence -->
      <div class="table-responsive my-result">
        <table class="table table-bordered table-hover table-condensed my-step">
          <thead>
          <colgroup>
            <col width="10%">
            <col width="25%">
            <col width="10%">
            <col width="10%">
            <col width="25%">
            <col width="20%">
          </colgroup>
          <tr>
            <th>步骤</th>
            <th>栈</th>
            <th>关系</th>
            <th>下一个</th>
            <th>其余输入部分</th>
            <th>最左质短语</th>
          </tr>
          </thead>
          <tbody class="my-process"></tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">匹配过程</h4>
        </div>
        <div class="modal-body">
          <div class="table-responsive my-result">
            <table class="table table-bordered table-hover table-condensed my-step">
              <thead>
              <colgroup>
                <col width="10%">
                <col width="25%">
                <col width="10%">
                <col width="10%">
                <col width="25%">
                <col width="20%">
              </colgroup>
              <tr>
                <th>步骤</th>
                <th>栈</th>
                <th>关系</th>
                <th>下一个</th>
                <th>其余输入部分</th>
                <th>最左质短语</th>
              </tr>
              </thead>
              <tbody class="my-process"></tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal" id="my-warning" tabindex="-1" role="dialog" aria-labelledby="my-warning-head">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="my-warning-head">警告</h4>
        </div>
        <div class="modal-body has-error">
          <label>你输入的不是算符优先文法,请重新输入!</label>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">重置</button>
        </div>
      </div>
    </div>
  </div>
</div><!-- main -->


<script src="js/jquery-1.12.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script src="js/handle.js"></script>
</body>
</html>